<template>
	<view class="container">
		<view class="bannerList">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item, index) in nowPlayingList.subjects" :key="index">
					<image mode="widthFix" class="slider" :src="item.images.small" @click="toDetails(item.id)"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="list" v-for="(item, index) in moviesList" :key="index">
			<view class="title">{{ item.title }}<text @click="toClass(item.title)">></text></view>
			<scroll-view scroll-x="true" style="white-space: nowrap;">
				<view class="slider" v-for="(it, idx) in item.subjects" :key="idx">
					<image :src="it.images.small" mode="widthFix" @click="toDetails(it.id)"></image>
					<view class="name">{{ it.title }}</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { comingSoon, newMoives, top250 } from '../../apis';
export default {
	data() {
		return {
			// comingsoon: {},
			// newmovies; {},
			moviesList: []
		};
	},
	onReady() {
		//this.$store.dispatch("getCity");
		this.pageInit();
		// comingSoon({
		// 	city: this.$store.state.city,
		// 	start: "0",
		// 	count: "8"
		// }).then((res) => {
		// 	let [err, data] = res;
		// 	this.comingsoon = data.data
		// })

		// newMoives({
		// 	city: this.$store.state.city,
		// 	start: "0",
		// 	count: "8"
		// }).then((res) => {
		// 	let [err, data] = res;
		// 	this.newmovies = data.data
		// })
	},
	computed: {
		nowPlayingList() {
			return this.$store.state.nowPlayingList;
		}
	},
	methods: {
		toDetails(id) {
			console.log(id);
			uni.navigateTo({
				url: '../details/details?id=' + id
			});
		},
		toClass(title){
			uni.navigateTo({
				url:"../class/class?title="+title
			})
		},
		pageInit() {
			uni.showLoading({
				title:"加载中"
			});
			Promise.all([this._comingSoon(), this._newMovies(), this._top250()]).then(res => {
				let rel = [];
				res.map(item => {
					rel.push(item[1].data);
				});
				this.moviesList = rel;
				uni.hideLoading();
			});
		},
		
		_comingSoon() {
			return comingSoon({
				city: this.$store.state.city,
				start: '0',
				count: '8'
			});
		},
		_newMovies() {
			return newMoives({
				city: this.$store.state.city,
				start: '0',
				count: '8'
			});
		},
		_top250() {
			return top250({
				city: this.$store.state.city,
				start: '0',
				count: '8'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	background-color: #2c405a;

	.bannerList {
		.swiper {
			height: 400upx;
			.slider {
				width: 100%;
			}
		}
	}

	.list {
		margin-top: 40upx;
		background-color: #2e4461;

		.title {
			color: #ffffff;
			margin-left: 20upx;
			padding: 10upx 0;
			font-size: 40upx;
			text{
				float: right;
				padding: 0 10upx;
			}
		}
		.slider {
			display: inline-block;
			width: 180upx;
			margin-left: 20upx;
			display: inline-block;
			text-overflow: ellipsis;
			image {
				width: 100%;
				height: 300upx;
			}
			.name {
				color: #ffffff;
				text-align: center;
				font-size: 30upx;
				overflow: hidden;
			}
		}
		
	}
}
</style>
